<template>
  <div>
    <!-- 全选复选框 -->
    <el-checkbox
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
    >
      全选
    </el-checkbox>
    <!-- 城市复选框组 -->
    <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :key="city" :label="city" :value="city">
        {{ city }}
      </el-checkbox>
    </el-checkbox-group>

    <!-- 学生信息表格 -->
    <el-table :data="tableData">
      <el-table-column
          v-for="city in checkedCities"
          :key="city"
          :label="city"
          :prop="city"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref} from 'vue';

// 定义变量
const checkAll = ref(false); // 全选复选框状态
const isIndeterminate = ref(true); // 是否半选状态
const checkedCities = ref(['学号', '班级']); // 已选城市
const cities = ['学号', '班级', '姓名', '年龄']; // 城市列表
const tableData = ref([
  {学号: 202122222, 班级: '33333', 姓名: '张三', 年龄: '12'} // 学生信息数据
]);

// 处理全选复选框变化
const handleCheckAllChange = (val) => {
  checkedCities.value = val ? cities : []; // 全选或取消选中所有城市
  isIndeterminate.value = false; // 取消半选状态
}

// 处理城市复选框变化
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length; // 已选城市数量
  checkAll.value = checkedCount === cities.length; // 更新全选复选框状态
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length; // 更新半选状态
}
</script>
